<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>album_list</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }
        .pagiantion{
            text-align: center;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理<small>album管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="content-header">
        <el-button type="primary"  class="butT" @click="formVisible=true">新增</el-button>
        <el-button type="primary" class="butT" onclick="location.href='album.html'">返回</el-button>
    <div class="add-form" style="margin-bottom: 50px">
        <!--弹出窗口-->
        <el-dialog  title="编辑" :visible.sync="formVisible" >
            <el-form label-width="80px">
                    <el-form-item label="图片">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/native.do"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-button type="primary" @click="save()">保存</el-button>
                    <el-button @click="formVisible = false" >关闭</el-button>
            </el-form>
        </el-dialog>
    </div>

    <div>
        <el-row>
            <el-col v-for="(item, index) in albumList" span="5">
                <el-image
                        :key="index"
                        style="width: 100px; height: 100px"
                        :src="item.url"
                        :preview-src-list="[item.url]"
                >
                </el-image>
                <div>
                    <el-button @click="dele(index)" size="mini" type="danger" size="small">删除</el-button>
                </div>
            </el-col>
        </el-row>

    </div>
        <div class="pagination-container" style="text-align: center !important;">
            <el-pagination
                    class="pagiantion"
                    @size-change="fetchData"
                    @current-change="fetchData"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>



</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                pojo: {},
                albumId:0,
                albumList:[],
                formVisible:false,
                imageUrl:''
            }
        },
        created(){
            this.albumId = getQueryString("albumId");
            console.log(this.albumId);
            this.fetchData();
        },
        methods:{
            fetchData (){
                // 调用查询
                axios.get(`/album/findById.do?id=${this.albumId}`).then(response => {
                    this.pojo = response.data;
                    this.albumList=JSON.parse(response.data.imageItems);
                    console.log(this.pojo);
                    console.log(this.albumList);
                    //this.imageUrl=this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele(index) {
                this.albumList.splice(index, 1);
                this.pojo.imageItems = JSON.stringify(this.albumList);
                axios.post(`/album/update.do`, this.pojo).then(response => {
                    this.formVisible = false;
                })
            },
            save (){
                this.albumList.push({url:this.imageUrl});
                this.pojo.imageItems = JSON.stringify(this.albumList) //如页面有图片上传功能放开注释
                axios.post(`/album/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response => {
                    this.fetchData (); //刷新列表
                    this.formVisible = false ;//关闭窗口
                });
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    })
</script>
</html>
